<template>
	<el-container>
		<div class="right-panel">
			<div class="right-panel-search" style="width: 100%; margin-top: 5px; margin-bottom: 5px">
				<div class="panel-search-box2">
					<el-date-picker value-format="YYYY-MM-DD" v-model="currentdDate" type="daterange"
						start-placeholder="开始日期" end-placeholder="结束日期" @change="change" :size="size"
						style="width: 180px; margin-left: 10px" />
				</div>

				<div class="panel-search-box2">
					<el-cascader @change="changeProv" v-model="province" :collapse-tags="true" max-collapse-tags="1"
						:show-all-levels="false" :options="options" :props="{ multiple: true }" clearable
						style="margin-left: 10px; width: 180px" placeholder="请选择省/市" />

				</div>
				<div class="panel-search-box2">
					<el-select v-model="search.prdName" placeholder="请选择品种" style="width: 180px; margin-left: 10px"
						filterable clearable>
						<el-option v-for="item in admMkMainBusinessTypes" :key="item.value" :label="item.label"
							:value="item.value"></el-option>
					</el-select>
				</div>

				<div class="panel-search-box2" style="margin-left: 10px;">
					<el-select v-model="search.custType" placeholder="请选择上游客户类型" style="width: 180px; margin-left: 10px"
						filterable clearable>
						<el-option label="配送商" value="配送商"></el-option>
						<el-option label="商道客户" value="商道客户"></el-option>
					</el-select>
				</div>

				<div class="panel-search-box2" style="margin-left: 10px;">
					<el-input v-model="search.custSell" placeholder="请输入上游客户名称" style="width: 180px"
						clearable></el-input>
				</div>
				<div class="panel-search-box2" style="margin-left: 10px;">
					<el-input v-model="search.custIdSell" placeholder="请输入上游客户编码" style="width: 180px"
						clearable></el-input>
				</div>
				<div class="panel-search-box2">
					<el-select v-model="search.custLvlBuy" placeholder="请选择下游客户级别"
						style="width: 180px; margin-left: 10px" filterable clearable>
						<el-option label="VIP" value="VIP"></el-option>
						<el-option label="二级" value="二级"></el-option>
						<el-option label="三级" value="三级"></el-option>
					</el-select>

				</div>
				<div class="panel-search-box2">
					<el-input v-model="search.custBuy" placeholder="请输入下游客户名称" style="width: 180px; margin-left: 10px"
						clearable></el-input>
				</div>

				<div class="panel-search-box2">
					<el-input v-model="search.custIdBuy" placeholder="请输入备案下游编码" style="margin-left: 10px; width: 180px"
						clearable></el-input>
				</div>

				<div style="margin-left: 500px;">
					<el-button type="primary" style="margin-left: 10px" @click="upsearch">查询</el-button>
					<el-button type="" @click="cleanSearch">清空</el-button>
					<el-button type="primary" style="margin-left: 10px" @click="dialog = true">导出</el-button>
				</div>
			</div>
		</div>
		<el-header style="display: none"></el-header>
		<el-main class="nopadding">
			<scTable ref="table" border :apiObj="apiObj" :params="params" stripe remoteSort remoteFilter>
				<el-table-column label="销售日期" prop="trdDt" align="center" width="150"></el-table-column>
				<el-table-column label="上游省份" prop="provOut" align="center" width="150"></el-table-column>
				<el-table-column label="上游城市" prop="cityOut" align="center" width="150"></el-table-column>
				<el-table-column label="品种" prop="prdName" align="center" width="150"></el-table-column>
				<el-table-column label="上游客户类型" prop="custType" align="center" width="150"></el-table-column>
				<el-table-column label="上游客户名称" prop="custSell" align="center" width="150"></el-table-column>
				<el-table-column label="上游客户编码" prop="custIdSell" align="center" width="150"></el-table-column>
				<el-table-column label="下游客户级别" prop="custLvlBuy" align="center" width="150"></el-table-column>
				<el-table-column label="下游客户名称" prop="custBuy" align="center" width="150"></el-table-column>
				<el-table-column label="下游客户编码" prop="custIdBuy" align="center" width="150"></el-table-column>
				<el-table-column label="销售金额（万元）" prop="trdAmt" align="center" width="150"></el-table-column>
				<el-table-column label="销售数量（盒）" prop="trdCnt" align="center" width="150"></el-table-column>
			</scTable>
		</el-main>
	</el-container>

	<!-- 导出 -->
	<scFileExport ref="scFileExport" :apiObj="deriveExcel" :post="true" :data="search" fileName="数据导出" hideButton>
	</scFileExport>

	<el-drawer v-model="dialog" title="导出" :size="400" direction="rtl" append-to-body destroy-on-close>
		<el-main style="padding: 0 20px 20px 20px">
			<el-form label-width="100px" label-position="left" style="margin: 10px 0 20px 0">
				<el-form-item label="文件名">
					<el-input v-model="formData.fileName" placeholder="请输入文件名" />
				</el-form-item>
				<el-form-item label="文件类型">
					<el-select v-model="formData.fileType" placeholder="请选择文件类型">
						<el-option label="xlsx" value="xlsx" />
						<el-option label="xls" value="xls" />
					</el-select>
				</el-form-item>
			</el-form>
			<el-button type="primary" size="large" icon="el-icon-download" style="width: 100%" @click="exportDetail">下
				载</el-button>

		</el-main>
	</el-drawer>
</template>

<script>
export default {
	name: 'customerList',
	data() {
		return {
			search: {},
			apiObj: this.$API.customerCenter.nonWhiteDetail.admMkNonWhiteListDetails,
			params: {},
			currentdDate: [],
			provinceList: [],//省份
			admMkMainBusinessTypes: [],
			province: [],
			options: [],
			dialog: false,
			formData: {
				fileType: 'xlsx'
			}
		}
	},
	watch: {

	},

	mounted() {
		this.getSelectData()
	},
	created() {

	},
	methods: {
		async exportDetail(e) {
			let res = await this.$API.customerCenter.nonWhiteDetail.admMkNonWhiteList.post({ data: this.search })//接口获取blob数据
			const url = window.URL.createObjectURL(new Blob([res]));
			const link = document.createElement('a');
			link.style.display = 'none';
			link.href = url;
			const fileName = this.formData.fileName + '.' + this.formData.fileType;
			link.setAttribute('download', fileName);
			document.body.appendChild(link);
			link.click();
			document.body.removeChild(link);
			this.dialog = false
		},
		change() {
			// console.log('事件', this.currentdDate);
			if (this.currentdDate && this.currentdDate.length > 0) {
				this.search.startTime = this.currentdDate[0]
				this.search.endTime = this.currentdDate[1]
			}else{
				this.search.startTime = ''
				this.search.endTime = ''
			}

		},
		changeProv(value) {
			// 清空存储
			this.search.provs = [];
			this.search.cities = [];

			value.forEach((path) => {
				const [provinceValue, cityValue] = path;
				const province = this.options.find((item) => item.value === provinceValue);
				const city = province?.children?.find((item) => item.value === cityValue);

				if (city) {
					this.search.cities.push(city.label);
				}

				if (province) {
					const isProvinceExist = this.search.provs.some(
						(item) => item === province.label
					);
					if (!isProvinceExist) {
						this.search.provs.push(province.label);
					}
				}
			});


		},
		getSelectData() {
			this.provinceList = []
			this.$API.customerCenter.filingWhiteList.getChinaTree.get().then((res) => {
				this.options = res.data.map((province) => ({
					label: province.province,
					value: province.code,
					children: province.cities.map((city) => ({
						label: city.name,
						value: city.name,
					}))
				}))

			})

			this.$API.customerCenter.filingWhiteList.admMkMainBusinessTypes.get().then((res) => {
				this.admMkMainBusinessTypes = []
				res.data.forEach((e) => {
					this.admMkMainBusinessTypes.push({
						value: e.prdNameDms,
						label: e.prdNameDms
					})
				})

			})
		},
		upsearch() {
			this.$refs.table.upData(this.search)
		},
		cleanSearch() {
			this.search = {}
			this.$refs.table.reload(this.search)
		},
	}
}
</script>

<style>
.header-btn-item {
	display: flex;
}

.panel-search-box2 {
	margin: 10px 0;
}
</style>
